<!DOCTYPE html>

<html>
	<head>
		<title>Camera</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">
			//once everything is loaded, we run our Three.js stuff.
			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();
 				
 				//add perspective camera 
 				var persCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				persCamera.position.x = -40;
		        persCamera.position.y = 80;
		        persCamera.position.z = 100;

		        //add orthographic camera
		        var orthoCamera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16,
		        	window.innerHeight / -16, -200, 500);
		        orthoCamera.position.x = -40;
		        orthoCamera.position.y = 80;
		        orthoCamera.position.z = 100;

 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-40, 100, -10);
 				scene.add(spotLight);

 				var spotLight2 = new THREE.SpotLight(0xff0000);
 				spotLight2.castShadow = true;
 				spotLight2.position.set(50, 100, 20);
 				scene.add(spotLight2);

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(120,80,1,1);
 				var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				var plane = new THREE.Mesh(planeGeo, planeMtr);
 				plane.rotation.x = -0.5 * Math.PI;
		        plane.position.x = 0;
		        plane.position.y = 0;
		        plane.position.z = 0;
		        plane.receiveShadow = true;
		        scene.add(plane);

		        //add boxes
		        var boxGeo = new THREE.BoxGeometry(4, 4, 4);
		        for(var i = 0; i < 24; i++){
		        	for(var j=0; j < 16; j++){
		        		var boxmtr = new THREE.MeshLambertMaterial();
		        		boxmtr.color = new THREE.Color(Math.random(), Math.random(), Math.random());

		        		var box = new THREE.Mesh(boxGeo, boxmtr);
		        		box.position.x = -57.5 + i * 5;
		        		box.position.z = -37.5 + j * 5;
		        		box.position.y = 2;
		        		scene.add(box);
		        	}
		        }

		        //add sphere
		        var sphereGeo = new THREE.SphereGeometry(2, 20, 20);
		        var sphere = new THREE.Mesh(sphereGeo, new THREE.MeshLambertMaterial({color: 0xffee33}));
		        sphere.position.set(20, 20, 20);
		        scene.add(sphere);

		        var camera = persCamera;
		        // var camera = orthoCamera;
		        camera.lookAt(scene.position);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        var controls = new function() {
		        	this.camera = "Perspective Camera";

		        	this.switchCamera = function() {
		        		if(camera instanceof THREE.PerspectiveCamera){
		        			camera = orthoCamera;
		        			controls.camera = "Orthographic Camera";
		        		}
		        		else if(camera instanceof THREE.OrthographicCamera){
		        			camera = persCamera;
		        			controls.camera = "Perspective Camera";
		        		}
		        	}
		        }

		        var gui = new dat.GUI();
		        gui.add(controls, "camera").listen();
		        gui.add(controls, "switchCamera");


 				//add animation
 				render();
 				var step = 0;

 				function render(){
 					stats.update();

 					step += 0.02;
 					var x = -10 + ( 100 * (Math.sin(step)));
 					var y = 20 + 10 * (Math.cos(step));
	               	camera.lookAt(new THREE.Vector3(x, y, 10));
	               	sphere.position.set(x, y, 10);

 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

		</script>

	</body>
</html>